<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<view style="padding: 0 44rpx;box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view>國家/地區 代碼</view>
			<view style="width: 180rpx;"></view>
		</view>
		<view style="margin-top: 40rpx;padding: 0 40rpx 100rpx;">
			<view style="margin: 20rpx 0 40rpx;">
				<u-search 
					placeholder="搜索 國家/地區" 
					v-model="keyword" 
					:showAction="false"
					searchIconSize="45"
					height="90"
					bgColor="#F8F8F8"
					borderColor="#E6E6E6"
				></u-search>
			</view>
			<u-index-list 
				:scrollTop="scrollTop" 
				:index-list="indexList" 
				:sticky="false" 
				:customNavHeight="navHeight"
				activeColor="#27C5D6"
				inactiveColor="#27C5D6"
			>
				<u-index-item v-for="(item, index) in list" :key="index">
					<u-index-anchor :index="item.letter" bgColor="#FFF" :text="item.letter" size="28" height="55" />
					<view class="list-cell u-border-bottom" v-for="(item_, index) in item.data" :key="index" @click="handleItemClick(item_.code)">
						{{item_.name}}
					</view>
				</u-index-item>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import { getCountry } from '@/config/api.js';
	// import indexList from '@/static/js/country_codes.js';
	// const letterArr = indexList.list.map(val => {
	// 	return val.letter=='熱門'?'':val.letter;
	// })
	export default {
		data() {
			return {
				scrollTop: 0,
				keyword:'',
				navHeight:210,
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'M', 'N', 'P', 'R', 'S', 'T', 'U', 'V', 'W', 'Y', 'Z'],
				// list: indexList.list
				list: []
			}
		},
		onLoad(option) {
			// console.log(option)
			this.getCountriesFn()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			handleItemClick(text){
				// const pureNumbers = text.replace(/\D/g, '');
				// console.log(pureNumbers)
				console.log(text)
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { data:text }); // 发送数据
				uni.navigateBack();
			},
			getCountriesFn(){
				let that = this;
				uni.showLoading();
				
				getCountry({keyword:that.keyword}).then((res) => {
					//success
					console.log(res)
					that.list = res;
					uni.hideLoading();
					
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		overflow-y: hidden;
		
		.header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: $u-content-color;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
	}
	
</style>
